<script setup lang="ts">
import type {sysColorType} from "@/types/SettingType.ts";

const emits = defineEmits<{
  (e: 'update:value', data: string): void
}>()

withDefaults(
    defineProps<{
      list: sysColorType[]
      value: string
    }>(),
    {
      value: ''
    }
)

const handleSelect = (row: sysColorType) => {
  emits('update:value', row.value)
}

</script>

<template>
  <a-space :wrap="true">
    <div
        class="setting-theme-item"
        v-for="item in list"
        :key="item.value"
        :style="{
           background: item.value
        }"
        @click="handleSelect(item)"
    >
      <icon-check
          v-if="item.value === value"
          :style="{
            color: item.color || '#fff'
          }"
      />
    </div>
  </a-space>
</template>

<style scoped lang="scss">
.setting-theme-item {
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>